<template>
    <div class="course-detail-body-container">
        <!-- 标题栏 -->
        <div class="body-title-line">
            <div>
                <div :class="{ 'active': showIndex == 1 }" @click="showIndex = 1">课程描述</div>
                <div :class="{ 'active': showIndex == 2 }" @click="showIndex = 2">目录</div>
                <div :class="{ 'active': showIndex == 3 }" @click="showIndex = 3">评论</div>
            </div>
        </div>

        <!-- 课程描述 -->
        <div class="course-desc" v-show="showIndex == 1" v-html="courseDetail.description">
        </div>

        <!-- 课程目录 -->
        <div class="course-catalogue" v-show="showIndex == 2">
            <div class="unit" @mouseenter="unitIndex = index" @mouseleave="unitIndex = -1"
                v-for="(item, index) in courseDetail.chapterList" :key="item.id">
                <!-- 标题行 -->
                <div class="unit-title">
                    <div>{{ index + 1 }}. {{ item.chapterName }}</div>
                    <!-- 下载logo -->
                    <div>
                        <svg t="1752909180484" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="7516" width="20" height="20">
                            <path
                                d="M548.434 910.203V548.347c0-33.014-51.2-33.014-51.2 0v361.856c0 33.019 51.2 33.019 51.2 0z"
                                p-id="7517" fill="#ffffff"></path>
                            <path
                                d="M352.092 822.671l151.603 151.583c9.867 9.866 26.343 9.866 36.204 0l153.928-153.928c23.367-23.362-12.836-59.57-36.199-36.198a4363237.908 4363237.908 0 0 1-153.933 153.928H539.9L388.3 786.473c-23.373-23.368-59.577 12.83-36.209 36.198z m3.748-150.461c-76.37 0-153.923 9.323-213.78-48.502-89.048-86.016-46.813-237.276 67.179-275.016 11.832-3.916 17.475-12.702 18.796-24.683 0.24-2.202 0.814-5.965-0.533 3.84a243.32 243.32 0 0 1 1.075-6.886 347.433 347.433 0 0 1 5.627-26.333 359.864 359.864 0 0 1 28.672-76.738c38.175-74.747 103.352-124.754 185.84-141.066 92.816-18.36 204.499 2.206 275.14 67.763 42.296 39.25 67.481 93.153 78.53 149.156 2.867 14.525 2.964 11.71 3.517 27.084 0.405 11.32 7.501 21.735 18.796 24.684 110.92 28.969 160.82 155.13 100.034 252.278-28.026 44.79-79.18 71.398-131.102 74.27-28.022 1.547-56.438 0.128-84.5 0.128-33.015 0-33.015 51.2 0 51.2 36.996 0 75.755 3.124 112.388-2.985 65.46-10.926 121.257-51.015 154.343-108.267 71.29-123.361-3.492-280.98-137.549-315.991l18.795 24.683c-3.906-109.24-72.576-214.65-169.83-262.845-91.735-45.44-213.181-51.656-308.465-14.177-75.52 29.706-132.935 89.743-167.137 162.493-17.357 36.92-30.356 77.015-34.847 117.709l18.796-24.684C56.637 345.344-3.246 514.232 84.337 634.604c39.465 54.246 101.253 85.012 167.634 88.678 34.442 1.9 69.376 0.128 103.869 0.128 33.019 0 33.019-51.2 0-51.2z"
                                p-id="7518" fill="#ffffff"></path>
                        </svg>
                        <span>
                            下载
                        </span>
                    </div>
                </div>
                <!-- 单元的具体章节 -->
                <div class="unit-content" @mouseenter="unitSubIndex = subIndex" @mouseleave="unitSubIndex = -1"
                    v-for="(subItem, subIndex) in item.subchapters" :key="subItem.id">
                    <!-- 小节 -->
                    <div  @mouseenter="isInSection = true" @mouseleave="isInSection = false"
                        class="section">
                        <div>
                            {{ index + 1 }}-{{ subIndex + 1 }} {{ subItem.chapterName }}
                        </div>
                        <div>
                            <div v-if="unitIndex == index && unitSubIndex == subIndex && isInSection">观看</div>
                            <!-- 播放按钮 -->
                            <svg v-else t="1752935581454" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="8631" width="20" height="20">
                                <path
                                    d="M423.687947 757.47897a100.195631 100.195631 0 0 1-100.195631-101.197587V366.716009a100.195631 100.195631 0 0 1 153.299316-85.166286l232.453863 145.283665a100.195631 100.195631 0 0 1 0 170.332573L476.791632 741.447669a100.195631 100.195631 0 0 1-52.101729 15.029345z m0-410.802087a21.041083 21.041083 0 0 0-10.019563 3.005869 20.039126 20.039126 0 0 0-10.019563 17.033257v289.565374a20.039126 20.039126 0 0 0 31.060646 17.033257l232.453863-145.283665a20.039126 20.039126 0 0 0 0-34.066514L433.70751 349.682752a19.03717 19.03717 0 0 0-10.019563-4.007825z"
                                    fill="" p-id="8632"></path>
                                <path
                                    d="M512.862059 1023.999349A511.999674 511.999674 0 0 1 313.472753 40.078252a511.999674 511.999674 0 0 1 398.778611 942.840888 508.993805 508.993805 0 0 1-199.389305 41.080209z m0-943.842844C274.396457 80.156505 81.018889 273.534073 81.018889 511.999674s193.377568 431.84317 431.84317 431.84317 431.84317-194.379524 431.843169-431.84317S750.325704 80.156505 512.862059 80.156505z"
                                    fill="" p-id="8633"></path>
                            </svg>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <!-- 课程评论 -->
        <div class="course-remark" v-show="showIndex == 3">
            <div>评论</div>
            <div class="star-level" ref="starsBox">
                <span>
                    <a-rate v-model="value" :tooltips="desc" />
                    <span class="ant-rate-text">{{ desc[value - 1] }}</span>
                </span>

            </div>

            <textarea name="remark-content" id="remark-content" placeholder="请发表您对课程的评价"></textarea>
            <div class="sent-btn-box">
                <button>发表评论</button>
            </div>
            <!-- 课程评论 -->
            <div class="remarks-container">
                <!-- 一条评论 -->
                <div v-for="(item) in commentList" :key="item.commentId" class="remarkItem">
                    <!-- 评论的信息 -->
                    <div class="remark-info">
                        <div>
                            <img :src="item.user.avatarUrl" alt="">
                            <span>{{ item.user.nickname }}</span>
                        </div>
                        <div class="star-level">
                                 <a-rate :default-value="item.score" disabled />
                        </div>
                    </div>
                    <!-- 评论内容 -->
                    <div class="remark-content">
                        <p>{{ item.commentContent }}</p>
                        <div>
                            <span class="remark-date">{{ item.createdTime }}</span>
                            <span>回复</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import 'animate.css';
import { getCourseComment } from '@/api/request'
export default {
    name: 'CourseDetailBody',
    data() {
        return {
            showIndex: 1,
            commentList: [],
            isInSection: false,
            unitIndex: 0,
            unitSubIndex: 0,
            clickStarIndex: 0,
            value: 5,
            desc: ['差', '一般', '中等', '好', '非常好'],
        }
    },
    props: {
        courseDetail: {}
    },
    created() {
        getCourseComment(this.$route.query.courseId, 10, 1).then((result) => {
            this.commentList = result.rows
        }).catch((err) => {
            console.log('getCourseComment', err);
        });
    } 
}
</script>

<style lang="less" scoped>
#remark-content {
    padding: 10px 20px;
}

.lightStar {
    path {
        fill: rgb(250, 219, 20);

    }
}

.active {
    border-bottom: 2px solid #23db9b;
    color: #23db9b
}

.animate__fadeInLeft {
    animation-duration: 0.2s !important;
}

.animate__fadeOutRight {
    animation-duration: 0.2s !important;
}

.course-detail-body-container {
    width: 1120px;
    margin: auto;
    padding: 0 20px;
    border-radius: 4px;
    background-color: #fff;

    .body-title-line {
        border-bottom: 1px solid rgb(232, 232, 232);

        >div {
            display: flex;
            justify-content: space-evenly;
            margin: auto;

            width: 270px;

            >div {
                padding: 12px 16px;

                &:hover {
                    color: #23db9b;
                }
            }
        }
    }

    .course-desc,
    .course-catalogue,
    .course-remark {
        padding: 30px;
        transition: all 0.5s;
        animation: fadeIn 0.5s ease-in-out forwards; // 动画效果

        // 定义动画
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    }

    .course-catalogue {

        .unit {
            margin-bottom: 20px;

            .unit-title {
                display: flex;
                justify-content: space-between;

                div:first-of-type {
                    color: rgba(0, 0, 0, .85);
                    font-size: 22px;
                    line-height: 1.5;
                    font-weight: bold;
                }

                div:last-of-type {
                    padding: 5px 10px;
                    background-color: rgb(76, 194, 246);
                    color: white;
                }
            }

            .unit-content {

                .section {
                    height: 50px;
                    background-color: rgb(242, 242, 242);
                    margin-top: 10px;
                    padding: 0 20px;
                    line-height: 50px;
                    display: flex;
                    justify-content: space-between;

                    &:hover {
                        color: rgb(54, 215, 163);
                    }


                }
            }
        }
    }

    .course-remark {
        div:first-of-type {
            font-size: 16px;
            margin-bottom: 15px;
        }



        textarea {
            border: 1px solid rgb(232, 232, 232);
            border-radius: 2px;
            width: 1060px;
            height: 120px;
            resize: none;

            &:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgb(35, 219, 155);
            }
        }

        .sent-btn-box {
            display: flex;
            flex-direction: row-reverse;
            margin-top: 10px;
            margin-bottom: 20px;

            >button {
                background-color: rgb(0, 207, 140);
                color: white;
                border: none;
                outline: none;
                padding: 5px 10px;
            }
        }

        .remarks-container {
            .remarkItem {
                border-bottom: 1px solid rgb(232, 232, 232);
                margin-top: 10px;

                .remark-info {
                    display: flex;
                    justify-content: space-between;

                    div:first-of-type {
                        >img {
                            width: 32px;
                            height: 32px;
                            border-radius: 50%;
                            border: 1px solid;
                        }

                        span {
                            color: rgba(0, 0, 0, .65);
                            font-size: 14px;
                            padding: 0 10px;
                        }
                    }
                }

                .remark-content {
                    p:first-of-type {
                        padding-left: 40px;
                    }

                    div {
                        color: #999;
                        text-align: right;
                        font-size: 14px;

                        .remark-date {
                            margin-right: 5px;
                        }

                        span {
                            color: #777;
                        }
                    }
                }
            }
        }
    }


}

//评级的svg图
.star-level {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    >svg {
        margin-right: 5px;
    }
}
</style>
